<template>
    <view class="content">
        <van-popup position="bottom" @click-overlay="closePopup" :show="show" round z-index=104
            custom-style="width: 100%;background:#ffffff;overflow: hidden; ">
            <view class="popup-content">
                <van-cascader v-if="showCader" :value="cascaderValue" title="请选择所在地区" :options="options" @close="closePopup" @change="onChange"
                    @finish="onFinish" />

                <!-- <view class="area-level">
                    <view class="area-item" v-for="(item,index) in  selectedArea" :key="index">
                        <text>{{ item.name }}</text>
                    </view>
                    <view class="area-placeholder" v-if="!selectedArea[2]">请选择</view>
                </view>
                <view class="area-list">
                    <view class="area-option" v-for="(item,index) in currentOptions" :key="index" @tap="selectOption(item)">
                        <text>{{ item.name }}</text>
                    </view>
                </view> -->
              
            </view>
        </van-popup>
    </view>
</template>

<script>
import Toast from '@/wxcomponents/vant/toast/toast'
import { getAreaApi} from '@/api/address'
export default {
    props: {
        show: {
            type: Boolean,
            default: () => false
        },
        level: {
            type: Number,
            default: 3
        },
        // options: {
        //     type: Array,
        //     default: () => []
        // }
    },
    data () {
        return {
            curS:0,
            curSName:'',
            date: '',
            title: '取消订单',
            fieldValue: '',
            cascaderValue: '',
            tabList:[
                {
                    typeName:'省',
                },
                {
                    typeName:'市',
                },
                {
                    typeName:'区',
                }
            ],
            // options:[
            //     {
            //         text: '浙江省',
            //         value: '330000',
            //         children: [{ text: '杭州市', value: '330100' }],
            //     },
            //     {
            //         text: '江苏省',
            //         value: '320000',
            //         children: [{ text: '南京市', value: '320100' }],
            //     },
            // ],
            countyList:[],
            cityList:[],
            provinceList:[],
            areaMap: new Map(), // 用于存储所有地区数据的映射
            options: [
                //     {
                //     text: '山西省',
                //     value: '',
                //     children: [],
                // }
            ],
            currentOptions:[], // 当前显示的地区选项
            selectedProvince: '', // 当前选中的省份
            selectedCity: '', // 当前选中的城市
            selectedDistrict: '', // 当前选中的区
            areaData: {} ,// 省市区数据
            selectedArea: [], // 存储选中的地区
            showCader:false,
            fieldValue: '',
            cascaderValue: '',
        }
    },

    computed: {
    },


  watch:{
    show: {
        immediate: true, // 这句重要
        handler(v) {
            console.log(v, 'v')
            this.getCountyList()
            // this.loadAreaData()
            console.log(this.options, 'areaMap')
        },
        // deep: true
      }
  },
    onLoad () { },
    onReady () {},

    methods: {
       
        // 关闭弹窗
        closePopup () {
            this.$emit('closePopup')

            if (this.fieldValue) {
                const e = this.fieldValue.split('/')
                console.log(e, 'e')
                if (e.length < 2) {  // 只选择了省
                    this.$emit('finish', this.fieldValue, this.cascaderValue)
                }
            }
        },

        onFinish(e) {
            console.log('onFinish', e)
            const { selectedOptions, value } = e.detail;
            const fieldValue = selectedOptions
                .map((option) => option.text || option.name)
                .join('/');
            console.log('fieldValue', fieldValue, value)
            const ss = fieldValue.split('/')
            console.log(ss,'ss')
            this.$emit('finish', fieldValue, value)
        },
        // selectOption(item) {
        //     console.log('e',item)
        //     const option = item;
        //     this.selectedArea[item.level - 1] = option;
        //     debugger
        //     // 检查是否有子选项
        //     if (this.selectedArea.length === 3) {
        //         // 选择完成，可进行后续操作，如关闭弹窗并返回选择结果
        //         console.log('选择的地区：', this.selectedArea);
        //         this.closePopup();
        //     } else {
        //        if(this.selectedArea.length === 1){
        //          const currentOptionsItem = this.cityList.filter(city=> city.id === this.selectedArea[0].id)
        //          console.log(currentOptionsItem,'currentOptionsItem',this.selectedArea[0].id, this.selectedArea, currentOptionsItem.children)
        //          this.currentOptions = currentOptionsItem.children
        //          console.log(this.currentOptions,'currentOptions')
        //        }
        //     }
        // },
        processData(item) {
            return {
                text: item.name,
                value: String(item.id), // 确保转换为字符串
                children: item.children || [] // 确保children始终是数组
            }
        },
        onChange(e) {
            console.log('onChange', e)
            const { selectedOptions, value } = e.detail;
            const fieldValue = selectedOptions
               .map((option) => option.text || option.name)
               .join('/');
            console.log('fieldValue', fieldValue, value)
            this.fieldValue = fieldValue
            this.cascaderValue = value
        },
        // 处理地区数据

        // getProvinceList(){
        //     getAreaApi({level:1}).then(res=>{
        //         console.log(res,'res')
        //         this.provinceList = res.data
        //         // res.data.forEach(item => {
        //         //     this.options.push({
        //         //         text: item.name,
        //         //         value: item.id,
        //         //         children: item.children || null// 这个很关键
        //         //     })
        //         // })

        //         // const formatData = (data) => {
        //         //     return data.map(item => ({
        //         //         value: item.id,
        //         //         text: item.name,
        //         //         ...(item.children && {
        //         //             children: formatData(item.children) // 递归处理子节点
        //         //         })
        //         //     }));
        //         // };

        //         // this.options = formatData(res.data);
        //         console.log('转换后的options:', this.options);
        //     })
        // },
        // getCityList(){
        //     getAreaApi({level:2}).then(res=>{
        //         console.log(res,'res')
        //         this.cityList = res.data
        //         // const formatData = (data) => {
        //         //     return data.map(item => ({
        //         //         value: item.id,
        //         //         text: item.name,
        //         //         ...(item.children && {
        //         //             children: formatData(item.children) // 递归处理子节点
        //         //         })
        //         //     }));
        //         // };

        //         // this.options = formatData(res.data);
        //         console.log('转换后的options:', this.options);
        //     })
        // },
        getCountyList(){
            getAreaApi({level:this.level}).then(res=>{
                console.log(res,'res')
                const processOptions = (data) => {
                    return data.map(item => ({
                        text: item.name,
                        value: item.id,
                        children: item.children && item.children.length ? processOptions(item.children) : null
                    }));
                };
                const demooptions = processOptions(res.data);
                this.options = demooptions;
                setTimeout(() => {
                    // this.pageKey = Date.now();
                    this.showCader = true;
                }, 300)
                console.log('转换后的options:', demooptions);
            })
        },
        //  // 统一处理地区数据
        // processAreaData(data) {
        //     // 创建映射表
        //     const map = new Map(data.map(item => {
        //         const node = {
        //             value: item.id,
        //             text: item.name,
        //             children: []
        //         };
        //         return [item.id, node];
        //     }));
            
        //     // 构建树结构
        //     const roots = [];
        //     data.forEach(item => {
        //         const node = map.get(item.id);
        //         if (item.pid === 0) {
        //             roots.push(node);
        //         } else {
        //             const parent = map.get(item.pid);
        //             if (parent) {
        //                 parent.children.push(node);
        //             }
        //         }
        //     });
            
        //     return roots;
        // },

        // 合并三个接口的调用
        // async loadAreaData() {
        //     try {
        //         // 并行请求三个接口
        //         const [provinceRes, cityRes, countyRes] = await Promise.all([
        //             getAreaApi({level:1}),
        //             getAreaApi({level:2}),
        //             getAreaApi({level:3})
        //         ]);
                
        //         // 合并所有数据
        //         const allData = [
        //             ...provinceRes.data,
        //             ...cityRes.data, 
        //             ...countyRes.data
        //         ];
        //         this.provinceList = provinceRes.data
        //         this.cityList = cityRes.data
        //         this.countyList = countyRes.data
        //         console.log(allData, 'allData', provinceRes.data, cityRes.data, countyRes.data)
        //         // 处理数据
        //         // 创建省份字典用于快速查找
        //         const provinceDict = new Map();
        //         provinceRes.data.forEach(province => {
        //             provinceDict.set(province.name, {
        //                 ...province,
        //                 children: [] // 初始化空数组
        //             });
        //         });
        //         console.log(provinceDict, 'provinceDict')
        //          // 将城市分配到对应省份
        //         cityRes.data.forEach(city => {
        //             const province = provinceDict.get(city.name);
        //             console.log(province, 'province')
        //             if (province) {
        //                 province.children.push({
        //                     // text: city.name,
        //                     // value: String(city.id),
        //                     ...city.children || []
        //                 });
        //             }
        //         });

        //         // 转换最终需要的options格式
        //         const options = Array.from(provinceDict.values()).map(province => ({
        //             text: province.name,
        //             value: String(province.id),
        //             children: province.children
        //         }));
        //         // // 将城市分配到对应省份
        //         // cityRes.data.forEach(city => {
        //         //     const province = provinceDict.get(city.pid === 0? city.name : '');
        //         //     if (province) {
        //         //         if (!province.children) {
        //         //             province.children = [];
        //         //         }
        //         //         province.children.push(city);
        //         //     }
        //         // });
        //         // console.log(provinceDict, 'provinceDict')
        //         // const options = this.provinceList.map(province => {
        //         //     return {
        //         //         text: province.name,
        //         //         value: province.id,
        //         //         children: province.children || []
        //         //     };
        //         // });

        //         console.log('最终options:', options);
        //     } catch (error) {
        //         console.error('加载地区数据失败:', error);
        //     }
        // }
  },

}
</script>
<style lang="scss" scoped>

// 提示框
.popup-content {
    padding: 24rpx;
    font-size: 12px;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;

    .popupTitle {
        font-size: 20px;
        text-align: left;
        color: #111111;
        line-height: 20px;
    }


    .cancelPopup-wrapper {
        padding-top: 70rpx;
    }

    .popupTips{
        font-size: 28rpx;
        text-align: left;
        color: #111111;
    }

}
.bottom_btn{
    margin-top: 54rpx;
    margin-bottom: 54rpx;
}
.agreement {
    // height: 44px;
    font-size: 24rpx;
    color: #111111;
    display: flex;
    align-items: flex-start;
}
::v-deep .van-button--info {
    width: 100%;
    height: 86rpx;
    border-radius: 8px;
    background: #1F6AFF;
}
::v-deep .van-button--primary {
    width: 100% !important;
    height: 86rpx;
    font-size: 28rpx;
    border-radius:50rpx;
    // background: #FF6203 !important;
    // border: 1px solid #ff6203 !important;
}

::v-deep .van-count-down {
    display: inline;
    font-size: 14px;
    color: #98C4FF;
}

.href {
    color: #ff6203;
}
/* ::v-deep .van-checkbox{
      width: 12px;
  } */

.gray {
    color: gray;
}
::v-deep .van-button__text {
    // font-family: "PingFang SC";
    // font-style: normal;
    font-weight: bold;
    font-size: 16px;
}
.password {
    margin: 24px 0 12px;
}
.checked-img {
    height: 12px;
    width: 12px;
    margin-top: 4px;
}
button::after{
    border: none;
}
.button-hover{
    background-color: transparent;
}
.no-login{
    font-size: 24rpx;
    margin-bottom: calc(81rpx + env(safe-area-inset-bottom));
    line-height: 24rpx;
    color: #757980;
    text-align: center;
    margin-top: 75rpx;
}

.image{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: auto;
    width: 124rpx;
    height: 124rpx;
    img{
        width: 100%;
        height: auto;
    }
}
.middle{
    height: 80rpx;
}
.disabled-btn {
    // background-color: #cccccc !important;
    border-color: #cccccc !important;
}
.bottom_b{
    margin-top: 52rpx;
}

.l20 {
    margin-left: 20px;
}

.r13 {
    margin-right: 13px;
}

.r8 {
    margin-right: 8px;
}

.area-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  width: 80%;
  max-width: 600rpx;
  border-radius: 16rpx;
  padding: 24rpx;
}
.title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 16rpx;
}
.close-btn {
  position: absolute;
  top: 16rpx;
  right: 16rpx;
  font-size: 32rpx;
}
.area-level {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  border-bottom: 2rpx solid red;
}
.area-item {
  font-size: 30rpx;
  margin-right: 16rpx;
}
.area-placeholder {
  font-size: 30rpx;
  color: #999;
}
.area-list {
  max-height: 400rpx;
  overflow-y: auto;
}
.area-option {
  font-size: 30rpx;
  padding: 12rpx 0;
}
</style>

